<div class="pages-profile">
    <div fxLayout.gt-sm="row nowrap" fxLayout.lt-md="column nowrap" fxLayoutAlign.gt-sm="space-between start"
        fxLayoutGap="30px">
        <mat-card fxFlex="30" class="profile-card">
            <mat-card-content>
                <img mat-card-avatar src="../../../../../assets/images/avatars/tianhun.jpg">
                <mat-card-title class="profile-user">Tian-Hun</mat-card-title>
                <mat-card-subtitle class="profile-job">Technical Director</mat-card-subtitle>
                <p class="profile-introduction">
                    Don't be a programmer, be a problem solver.
                </p>
                <div class="profile-social">
                    <mat-icon size="1" svgIcon="mdi:qqchat" class="secondary-text s-24"></mat-icon>
                    <mat-icon size="1" svgIcon="mdi:github-circle" class="secondary-text s-24"></mat-icon>
                    <mat-icon size="1" svgIcon="mdi:twitter" class="secondary-text s-24"></mat-icon>
                    <mat-icon size="1" svgIcon="mdi:facebook" class="secondary-text s-24"></mat-icon>
                </div>
                <button mat-flat-button color="accent">Follow</button>
            </mat-card-content>
            <mat-card-actions class="profile-card-footer" fxLayout="row nowrap">
                <div fxFlex="32">
                    <strong class="profile-stat-count">260</strong>
                    <span>Follower</span>
                </div>
                <div fxFlex="32">
                    <strong class="profile-stat-count">180</strong>
                    <span>Following</span>
                </div>
                <div fxFlex="32">
                    <strong class="profile-stat-count">2000</strong>
                    <span>Tweets</span>
                </div>
            </mat-card-actions>
        </mat-card>

        <mat-card fxFlex="70" class="profile-board">
            <mat-tab-group>
                <mat-tab label="Activities">
                    <mat-list>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/4e/f8/e4/4ef8e4003d01d2bcb4e6bc8db7a0b2ef.jpg">
                                <div>
                                    <div>Herman Beck
                                        <span class="secondary-text font-size-12">posted a new note</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                “Check if it can be corrected with overflow : hidden”
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/38/59/f6/3859f6d3531a561eeadf0fa2a9f5ec5d.jpg">
                                <div>
                                    <div>June Lane
                                        <span class="secondary-text font-size-12">uploaded 4 photos</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/2a/0e/97/2a0e9792a8f1f9d7b3f7568882790c3a.jpg">
                                <div>
                                    <div>Mary Adams
                                        <span class="secondary-text font-size-12">posted an updated</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent
                                libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
                                imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
                                porta. Mauris massa.
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/5c/2d/78/5c2d78cf768f6f68f60f91efd46e6f22.jpg">
                                <div>
                                    <div>Herman Lucy
                                        <span class="secondary-text font-size-12">posted an updated</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                “Check if it can be corrected with overflow : hidden”
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/95/d3/ab/95d3ab06ef343085fb63a9812cf80772.jpg">
                                <div>
                                    <div>Caleb Richards
                                        <span class="secondary-text font-size-12">posted an new activity comment</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus.
                            </div>
                        </mat-list-item>
                    </mat-list>
                    <div class="pt-40 pb-40">
                        <button mat-flat-button class="show-more-btn">Show more</button>
                    </div>
                </mat-tab>
                <mat-tab label="Profile">
                    <mat-list>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/2a/0e/97/2a0e9792a8f1f9d7b3f7568882790c3a.jpg">
                                <div>
                                    <div>Mary Adams
                                        <span class="secondary-text font-size-12">posted an updated</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent
                                libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
                                imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
                                porta. Mauris massa.
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/4e/f8/e4/4ef8e4003d01d2bcb4e6bc8db7a0b2ef.jpg">
                                <div>
                                    <div>Herman Beck
                                        <span class="secondary-text font-size-12">posted a new note</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                “Check if it can be corrected with overflow : hidden”
                            </div>
                        </mat-list-item>


                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/5c/2d/78/5c2d78cf768f6f68f60f91efd46e6f22.jpg">
                                <div>
                                    <div>Herman Lucy
                                        <span class="secondary-text font-size-12">posted an updated</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                “Check if it can be corrected with overflow : hidden”
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/95/d3/ab/95d3ab06ef343085fb63a9812cf80772.jpg">
                                <div>
                                    <div>Caleb Richards
                                        <span class="secondary-text font-size-12">posted an new activity comment</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus.
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/38/59/f6/3859f6d3531a561eeadf0fa2a9f5ec5d.jpg">
                                <div>
                                    <div>June Lane
                                        <span class="secondary-text font-size-12">uploaded 4 photos</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                            </div>
                        </mat-list-item>
                    </mat-list>
                </mat-tab>
                <mat-tab label="Messages">
                    <mat-list>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/4e/f8/e4/4ef8e4003d01d2bcb4e6bc8db7a0b2ef.jpg">
                                <div>
                                    <div>Herman Beck
                                        <span class="secondary-text font-size-12">posted a new note</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                “Check if it can be corrected with overflow : hidden”
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/2a/0e/97/2a0e9792a8f1f9d7b3f7568882790c3a.jpg">
                                <div>
                                    <div>Mary Adams
                                        <span class="secondary-text font-size-12">posted an updated</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent
                                libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum
                                imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
                                porta. Mauris massa.
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/38/59/f6/3859f6d3531a561eeadf0fa2a9f5ec5d.jpg">
                                <div>
                                    <div>June Lane
                                        <span class="secondary-text font-size-12">uploaded 4 photos</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                                <img src="https://pinimg.ibenchu.net/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg" alt="">
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/5c/2d/78/5c2d78cf768f6f68f60f91efd46e6f22.jpg">
                                <div>
                                    <div>Herman Lucy
                                        <span class="secondary-text font-size-12">posted an updated</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                “Check if it can be corrected with overflow : hidden”
                            </div>
                        </mat-list-item>
                        <mat-list-item>
                            <div matLine fxLayoutAlign="start center" fxLayoutGap="16px">
                                <img matListAvatar src="https://pinimg.ibenchu.net/564x/95/d3/ab/95d3ab06ef343085fb63a9812cf80772.jpg">
                                <div>
                                    <div>Caleb Richards
                                        <span class="secondary-text font-size-12">posted an new activity comment</span>
                                    </div>
                                    <span class="secondary-text font-size-12">active 14 minutes ago</span>
                                </div>
                            </div>
                            <div matLine class="profile-item-content">
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus.
                            </div>
                        </mat-list-item>
                    </mat-list>
                </mat-tab>
            </mat-tab-group>
        </mat-card>
    </div>
</div>
